

const homePageTemplate=`
<div class="w">
                <!-- 轮播图 -->
                <div class="carousel-wrapper">
                    <div class="carousel-container">
                        
                    </div>
                    <!-- 指示器 -->
                     <ul class="carousel-indivators d-flex">
                        
                     </ul>
                </div>
                <!-- 推荐歌单 -->
                <div class="recommend-playlist">
                    <h3 class="recommend-playlist-header">推荐歌单
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-arrow-right"></use>
                        </svg>
                    </h3>
                    <ul class="recommend-playlist-container d-flex justify-content-between align-items-start">
                        
                    </ul>
                </div>
            </div>`;



// 引入ajax，完成前端数据接受
import { getBannerList }  from "../service/ajax.js";
// const result=await getBannerList();
// const carouselData=result.data.blocks[0].extInfo.banners;


import { carouselRender,initCarouselEvent } from "./carousel.js";

// // 首次轮播图渲染
// carouselRender(carouselData);
// // 轮播图事件绑定
// initCarouselEvent();


// 推荐歌单页面渲染
function recommendRender(data){
    // 获得推荐歌单盒子
    const recommendWrapper=document.querySelector('.recommend-playlist-container');
    let template="";
    let length=data.length;
    data.forEach((item,index)=>{
        template+=`
        <li data-index="${index}" class="recommend-playlist-item d-flex flex-column" style="width:${98/length}%">
            <div class="recommend-playlist-cover">
                <a href="#/recommendList/:${item.creativeId}">
                    <img src="${item.uiElement.image.imageUrl}" alt="">
                    <svg class="recommend-playlist-icon icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                </a>
            </div>
            <div class="recommend-playlist-title multi-text-omitted">
                ${item.uiElement.mainTitle.title}
            </div>
        </li>
        `;
    })
    recommendWrapper.innerHTML=template;
}

// 给推荐页面动态添加hover类事件
function initRecommendEvent(){
    const recommendWrapper=document.querySelector(".recommend-playlist-container");
    recommendWrapper.addEventListener("mouseenter",(e)=>{
        if(e.target.tagName==="LI"){
            e.target.setAttribute("class","recommend-playlist-item d-flex flex-column hover")
        }
    },true);

    recommendWrapper.addEventListener("mouseleave",(e)=>{
        if(e.target.tagName==="LI"){
            e.target.setAttribute("class","recommend-playlist-item d-flex flex-column");
        }
    },true);


};

// 播放器首页轮播图和推荐歌单公用一个后端数据接口
// const recommendData=[...result.data.blocks[2].creatives];
// recommendRender(recommendData);
// initRecommendEvent();// 推荐歌单页面事件绑定

export async function homePage(){
    // 首页初始化
    document.querySelector("#app").innerHTML=homePageTemplate;
    const result=await getBannerList();
    const carouselData=result.data.blocks[0].extInfo.banners;

    // 首次渲染轮播图
    carouselRender(carouselData);
    initCarouselEvent();// 轮播图事件绑定

    const recommendData=[...result.data.blocks[2].creatives];
    recommendRender(recommendData);
    initRecommendEvent();// 推荐歌单页面事件绑定
}



